import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import ActivePolls from "@/components/active-polls"
import SampleDataNotice from "@/components/sample-data-notice"

export default function Home() {
  return (
    <div className="container mx-auto px-2 sm:px-3 md:px-4 py-6 sm:py-8 md:py-10">
      <div className="flex flex-col items-center justify-center space-y-8 text-center">
        <div className="space-y-3">
          <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl text-blue-400">匿名投票应用</h1>
          <p className="max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
            参与投票和评论，您的身份将保持匿名，让您自由表达观点
          </p>
        </div>
        <div className="w-full max-w-3xl">
          <SampleDataNotice />
          <Card>
            <CardHeader>
              <CardTitle>当前活跃的投票</CardTitle>
              <CardDescription>选择一个投票参与，您的选择将保持匿名</CardDescription>
            </CardHeader>
            <CardContent>
              <ActivePolls />
            </CardContent>
          </Card>
        </div>
        <div className="flex flex-col gap-2 min-[400px]:flex-row">
          <Link href="/admin" passHref>
            <Button variant="outline">管理员入口</Button>
          </Link>
          <Link href="/about" passHref>
            <Button>了解更多</Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
